<template>
  <div class="result-page">
    <div v-if="mbtiResult" class="result-container">
      <h2>您的MBTI性格类型是：</h2>
      <div class="mbti-type">{{ mbtiResult }}</div>

      <div class="type-description">
        <div v-if="mbtiResult === 'INTJ'">
          <h3>建筑师 (INTJ)</h3>
          <p>富有想象力和战略性的思想家，一切皆在计划之中。</p>
        </div>
        <div v-else-if="mbtiResult === 'INTP'">
          <h3>逻辑学家 (INTP)</h3>
          <p>创新发明家，对知识有着止不住的渴望。</p>
        </div>
        <div v-else-if="mbtiResult === 'ENTJ'">
          <h3>指挥官 (ENTJ)</h3>
          <p>大胆，富有想象力且意志强大的领导者，总能找到或创造解决方法。</p>
        </div>
        <div v-else-if="mbtiResult === 'ENTP'">
          <h3>辩论家 (ENTP)</h3>
          <p>聪明好奇的思想者，不会放弃任何智力上的挑战。</p>
        </div>
        <div v-else-if="mbtiResult === 'INFJ'">
          <h3>提倡者 (INFJ)</h3>
          <p>安静而神秘，同时鼓舞人心且不知疲倦的理想主义者。</p>
        </div>
        <div v-else-if="mbtiResult === 'INFP'">
          <h3>调停者 (INFP)</h3>
          <p>诗意的，善良的利他主义者，总是热情地提供帮助。</p>
        </div>
        <div v-else-if="mbtiResult === 'ENFJ'">
          <h3>主人公 (ENFJ)</h3>
          <p>富有魅力鼓舞人心的领导者，能够吸引听众。</p>
        </div>
        <div v-else-if="mbtiResult === 'ENFP'">
          <h3>竞选者 (ENFP)</h3>
          <p>热情，有创造力爱社交的自由人，总能找到理由微笑。</p>
        </div>
        <div v-else-if="mbtiResult === 'ISTJ'">
          <h3>物流师 (ISTJ)</h3>
          <p>实际且注重事实的人，可靠性无可挑剔。</p>
        </div>
        <div v-else-if="mbtiResult === 'ISFJ'">
          <h3>守卫者 (ISFJ)</h3>
          <p>非常专注而温暖的守护者，时刻准备保护所爱之人。</p>
        </div>
        <div v-else-if="mbtiResult === 'ESTJ'">
          <h3>总经理 (ESTJ)</h3>
          <p>出色的管理者，在管理事情或人员方面无与伦比。</p>
        </div>
        <div v-else-if="mbtiResult === 'ESFJ'">
          <h3>执政官 (ESFJ)</h3>
          <p>极有同情心，爱交往受欢迎的人，总是热心提供帮助。</p>
        </div>
        <div v-else-if="mbtiResult === 'ISTP'">
          <h3>鉴赏家 (ISTP)</h3>
          <p>大胆而实际的实验家，擅长使用任何形式的工具。</p>
        </div>
        <div v-else-if="mbtiResult === 'ISFP'">
          <h3>探险家 (ISFP)</h3>
          <p>灵活有魅力的艺术家，随时准备探索体验新事物。</p>
        </div>
        <div v-else-if="mbtiResult === 'ESTP'">
          <h3>企业家 (ESTP)</h3>
          <p>聪明，精力充沛善于感知的人，真心享受生活在边缘。</p>
        </div>
        <div v-else-if="mbtiResult === 'ESFP'">
          <h3>表演者 (ESFP)</h3>
          <p>自发性，精力充沛而热情的表演者，生活在他们周围永不无聊。</p>
        </div>
        <div v-else>
          <h3>未知类型</h3>
          <p>无法确定您的性格类型，请重新测试。</p>
        </div>
      </div>

      <div class="result-actions">
        <button class="btn btn-restart" @click="$emit('restart-test')">
          重新开始测试
        </button>
      </div>
    </div>

    <div v-else class="loading-container">
      <h2>正在计算您的结果...</h2>
      <div class="spinner"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResultPage',
  props: {
    mbtiResult: String
  }
}
</script>

<style scoped>
.result-page {
  text-align: center;
  padding: 20px;
}

.result-container {
  max-width: 600px;
  margin: 0 auto;
}

h2 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.mbti-type {
  font-size: 48px;
  font-weight: bold;
  color: #3498db;
  margin: 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.type-description {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 0;
  text-align: left;
}

.type-description h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.type-description p {
  color: #555;
  line-height: 1.6;
}

.result-actions {
  margin-top: 30px;
}

.btn-restart {
  background-color: #27ae60;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-restart:hover {
  background-color: #219a52;
}

.loading-container {
  padding: 50px 20px;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .mbti-type {
    font-size: 36px;
  }

  .type-description {
    padding: 15px;
  }
}
</style>
